import { Text, SafeAreaView, StyleSheet, View } from 'react-native';
import {
  Gesture,
  GestureDetector,
  GestureHandlerRootView,
} from 'react-native-gesture-handler';
import Animated, {
  runOnJS,
  withDelay,
  withTiming,
} from 'react-native-reanimated';
import React, { useState } from 'react';

export default function EmptyExample() {
  const [myArray, setArray] = useState([1, 2, 3, 4, 5]);

  const customAnim = () => {
    'worklet';
    const animations = {
      backgroundColor: withDelay(
        500,
        withTiming('rgba(179, 6, 6, 1)', { duration: 500 })
      ),
    };
    const initialValues = { backgroundColor: 'rgba(16, 128, 26, 1)' };
    return { initialValues, animations };
  };

  const handleAddElement = Gesture.Tap().onStart(() => {
    runOnJS(setArray)([...myArray, Math.random().toString()]);
  });
  return (
    <SafeAreaView style={styles.container}>
      <GestureHandlerRootView>
        <GestureDetector gesture={handleAddElement}>
          <View>
            <Text>Add Element</Text>
          </View>
        </GestureDetector>
        {myArray.map((item) => {
          return (
            <Animated.View key={item.toString()} entering={customAnim}>
              <Text>{item}</Text>
            </Animated.View>
          );
        })}
      </GestureHandlerRootView>
    </SafeAreaView>
  );
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: 'center',
    backgroundColor: '#ecf0f1',
    padding: 8,
  },
});